<template>
  <div class="homeselected">
    <swiper>
      <swiper-slide>
          <h3>精选推荐 <span>游客的真实体验</span></h3>
        <div class="selected" v-for="item of list" :key="item.id">
          <div class="sele-main">
              <div class="sele-desc">
                  <h5 >{{item.title}}</h5>
                  <p class="sele-text">{{item.text}}</p>
                  <p>{{item.city}}</p>
                  <p class="reco-price">￥{{item.price}}</p>
              </div>
              <div class="sele-img">
                  <img  :src="item.imgUrl">
              </div>
          </div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeSelected',
  props:{
    list:Array
  },
  data() {
      return {
        // selectedList: [
        //   {
        //     id: "01",
        //     imgUrl: require("@/assets/images/recommend1.jpg"),
        //     title: "云台山少林寺龙门石",
        //     text:"少林寺、龙门石窟和云台山已经成为河南的城市名片",
        //     city:"古都河南",
        //     price:"1888"
        //   }, {
        //     id: "02",
        //     imgUrl: require("@/assets/images/recommend2.jpg"),
        //     title: "三亚纯玩",
        //     text:"三亚纯玩自助6日游，5晚连住经成为河南的城市名片",
        //     city:"古都河南",
        //     price:"2888"
        //   }, {
        //     id: "03",
        //     imgUrl: require("@/assets/images/recommend3.jpg"),
        //     title: "兵马俑华清宫回民街",
        //     text:"少林寺、龙门石窟和云台山已经成为河南的城市名片",
        //     city:"兵马俑华清宫回民街",
        //     price:"3888"
        //   },
        // ],
        swiperOption: {
          pagination: ".swiper-pagination",
          autoplay: false
        }
      };
    },
}
</script>

<style lang="stylus" scoped>
.homeselected 
    margin-top .2rem 
    border-radius .2rem
    background #ffffff
.selected
    width  96%
    height 2rem
    margin-top .1rem
    padding .1rem 0 .1rem .3rem
    background-color #ffffff
    border 1px solid rgba(235,235,235,0.4)
    border-radius .5rem
h3 
    font-weight bold
    padding .1rem 0 .1rem .3rem
span 
    font-size .2rem
    font-weight normal
.sele-main
    width 50%
    position absolute
h5 
    font-weight  bold
    padding-top .1rem
    font-size .24rem
    font-weight bold
.sele-desc p
    padding-top .1rem
    line-height .3rem
    font-size .2rem
.sele-desc .reco-price
    padding-top .2rem
    font-size .32rem
    color red
    font-weight bold
.sele-img
    float left
.sele-img:second-child
    margin-top .2rem  
.sele-img img
    width 3rem
    height 1.88rem
    border-radius .2rem
    position relative
    top -1.84rem
    left 4rem 
</style>